<script lang='ts' setup>
import { onMounted, reactive, ref } from 'vue'
import DictionaryFormDialog from './dictionary-form-dialog.vue'
import dictionaryApi from '/@/api/org/bean/dictionary'
import dictionaryTypeServiceApi from '/@/api/org/bean/dictionary-type'
import { deletePageTableSelectionDataList } from '/@/utils/api-service'
const DictionaryListRef = ref()

const props = defineProps({
    codeItemId: {
        type: String,
        required: true
    }
})
const DictionaryListState = reactive({
    queryName: 'queryList',
    queryParam: {
        codeItemId: props.codeItemId,
        likeAll: null,
    },
    tableColumn: [
        { label: '', width: '50', type: 'selection' },
        { label: '序号', width: '50', type: 'index' },
        { label: '排序', width: '100', prop: 'orderNum', sort: { sortable: 'custom' } },
        {
            label: '字典项编码', type: 'link', prop: 'codeId', linkClick: (row: any) => {
                DictionaryListState.currentDictionaryId = row.dictionaryId
                DictionaryListState.formDialogVisible = true;
            }
        },
        { label: '字典项名称', prop: 'codeName' },
    ],
    // 加载数据
    loadData: (params: any) => {
        return dictionaryApi.queryPage({ queryName: DictionaryListState.queryName, filterQuery: true }, { ...params, ...DictionaryListState.queryParam })
    },
    // 搜索
    onSearch: () => {
        DictionaryListRef.value.loadTable()
    },
    // 当前字典id
    currentDictionaryId: '',
    // 弹窗是否打开
    formDialogVisible: false,
    // 新增按钮点击事件
    onAddButtonClick: () => {
        DictionaryListState.currentDictionaryId = ''
        DictionaryListState.formDialogVisible = true
    },
    // 删除按钮点击事件
    deleteTableData: () => {
        deletePageTableSelectionDataList(DictionaryListRef, dictionaryApi)
    },
    /** 保存成功回调 */
    onSaveSuccess: () => {
        DictionaryListRef.value.loadTable()
    },
    /** 表单关闭回调 */
    updateFormDialogVisible: (val: any) => {
        DictionaryListState.formDialogVisible = val
    }
})

onMounted(() => {
    dictionaryTypeServiceApi.queryById(props.codeItemId).then(res => {
        if (res.data.itemScope == "org") {
            DictionaryListState.queryName = "queryList2";
        }
        DictionaryListRef.value.loadTable();
    })
})

defineExpose({
    getDictionaryListRef: () => DictionaryListRef.value
})


</script>
<template>
    <jxtech-page-table
        ref="DictionaryListRef"
        row-key="dictionaryId"
        fit="full"
        :default-sort="{ prop: 'orderNum', order: 'ascending' }"
        :table-column="DictionaryListState.tableColumn"
        :load-data="DictionaryListState.loadData"
    >
        <template #header>
            <div class="jxtech-page-table-header-flex">
                <div class="jxtech-page-table-header-flex-left">
                    <span class="jxtech-page-table-header-flex-title">字典项信息</span>
                </div>
                <div class="jxtech-page-table-header-flex-right">
                    <jxtech-add-button @click="DictionaryListState.onAddButtonClick"></jxtech-add-button>
                    <jxtech-delete-button @click="DictionaryListState.deleteTableData"></jxtech-delete-button>
                </div>
            </div>
        </template>
    </jxtech-page-table>

    <dictionary-form-dialog
        :form-dialog-visible="DictionaryListState.formDialogVisible"
        :dictionary-id="DictionaryListState.currentDictionaryId"
        :code-item-id="DictionaryListState.queryParam.codeItemId"
        @save-success="DictionaryListState.onSaveSuccess"
        @update:visible="DictionaryListState.updateFormDialogVisible"
    ></dictionary-form-dialog>
</template>